<script setup lang="ts">
//发起售后 - 模块
import Fast from "@/assets/base/sales/content-icon-fast-track.png";
import Self from "@/assets/base/sales/content-icon-self-support.png";
import Down from "@/assets/down.svg";
interface Data {
  id: number;
  class: string;
  title: string;
  msg_one: string;
  msg_two: string;
  link: string;
  link_text: string;
}
defineProps<{ data: Data }>();

//处理图片
const imgFast = `url(${Fast})`;
const imgSelf = `url(${Self})`;
</script>
<template>
  <section class="content-box box-shadow">
    <div class="content-icon" :class="data.class"></div>
    <div class="content-text">
      <h6>{{ data.title }}</h6>
      <div>{{ data.msg_one }}<br />{{ data.msg_two }}</div>
      <a :href="data.link"
        >{{ data.link_text }} >
        <img :src="Down" class="icon" v-if="false" />
      </a>
    </div>
  </section>
</template>
<style scoped lang="less">
.content-box {
  padding: 35px 35px 35px 45px;
  border: 1px solid #e2e2e2;
  box-sizing: border-box;
  border-radius: 10px;
  background-color: #f5f5f5;
}
.content-box:first-child {
  margin-bottom: 10px;
}

.box-shadow {
  box-shadow: 0 0 30px -8px rgba(0, 0, 0, 0.2);
}
.content-icon {
  float: left;
  width: 82px;
  height: 82px;
  margin-top: 5px;
  background-size: 100%;
}

.content-icon.content-icon-1 {
  --img-fast: v-bind(imgFast);
  background: var(--img-fast) no-repeat 50%;
  background-size: 100%;
}
.content-icon.content-icon-2 {
  background:v-bind(imgSelf) no-repeat 50%;
  background-size: 100%;
}

.content-text {
  margin-left: 127px;
  font-size: 12px;
  h6 {
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 700;
  }
  div {
    margin-bottom: 8px;
    line-height: 1.6em;
  }
  a {
    font-weight: 600;
  }
}
</style>
